<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 200px;height: 50px;margin: 10px;background-color: #ccc;}
    .box2{position: absolute;}
  </style>
</head>
<body>
  <div class="box box1">点击开始随机颜色</div>
  <div class="box box2">点击开始改变大小</div>
</body>
<script>
  var box1 = document.querySelector(".box1")
  box1.onclick = function(){
    setInterval(function(){
      // 在计时器内改变颜色（随机色）
      box1.style.background = randomRGB();
    }, 100)
  }

  var box2 = document.querySelector(".box2");
  var t;
  box2.onclick = function(){
    t = setInterval(function(){
      // 获取当前宽度
      var now = parseInt(getStyle(box2, "left"));
      // 判断是否到最大宽度
      if(now >= 400){
        // 如果是最大宽度，清除计时器
        clearInterval(t);
      }else{
        // 如果不是最大宽度，那就在当前宽度的基础上 + 10，再设置回去
        box2.style.left = now + 10 + "px";
      }
    }, 100);
  }



  function getStyle(ele, attr){
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
  }

  function randomRGB(){
    return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
  }

  function random(a,b){
    return Math.round(Math.random() * (a-b) + b)
  }
</script>
</html>